<template>
  <div class="welcome-card">
    <img class="welcome-card-image" :src="image" alt="welcome card logo">
    <div class="welcome-card-description">
      <h1>{{ props?.data?.title }}</h1>
      <p>{{ props?.data?.description }}</p>
      <p>{{ props?.data?.text }}</p>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps} from 'vue'

const props = defineProps({
  image: String,
  data: Object
})
</script>

<style scoped lang="less">
/* 组件样式 */
.welcome-card {
  transform: translateY(-0.7rem);
  width: 80%;
  text-align: center;

  .welcome-card-image {
    margin: 0 auto 1rem;
    width: 80%;
  }

  .welcome-card-description {
    color: aliceblue;

    h1 {
      padding: 0.15rem 0;
      font-size: 0.55rem;
    }

    p {
      font-size: 0.45rem;
    }
  }
}
</style>